<script setup>

</script>

<template>
    <el-button class="windows7">windows7</el-button>
</template>

<style scoped>
button.windows7 {
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  padding: 1px 8px;
  border: 1px solid #f3f3f3;
  -moz-box-shadow: 0 0 0 1px #707070;
  -webkit-box-shadow: 0 0 0 1px #707070;
  box-shadow: 0 0 0 1px #707070;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 2px;
  background: linear-gradient(
      to bottom,
      #f2f2f2 0%,
      #ebebeb 50%,
      #dddddd 51%,
      #cfcfcf 100%
  );
  font: normal 12px "Webly Sleek UI", "Frutiger", "Lucida Sans Unicode",
  "Lucida Grande", "Open Sans", sans-serif;
  color: black;
}

button.windows7:hover {
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  border: 1px solid #ecf7fd;
  -moz-box-shadow: 0 0 0 1px #3c7fb1;
  -webkit-box-shadow: 0 0 0 1px #3c7fb1;
  box-shadow: 0 0 0 1px #3c7fb1;
  background: linear-gradient(
      to bottom,
      #eaf6fd 0%,
      #d9f0fc 50%,
      #bee6fd 51%,
      #a7d9f5 100%
  );
}

button.windows7:active {
  -webkit-transition-duration: 0s; /* Safari */
  transition-duration: 0s;
  border: 1px solid #73a7c4;
  -moz-box-shadow: 0 0 0 1px #2c628b;
  -webkit-box-shadow: 0 0 0 1px #2c628b;
  box-shadow: 0 0 0 1px #2c628b;
  background: linear-gradient(
      to bottom,
      #e5f4fc 0%,
      #c4e5f6 50%,
      #98d1ef 51%,
      #68b3db 100%
  );
}

</style>
